<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" ref="queryRef" class="demo-form-inline">
      <el-form-item label="年份选择">
        <el-date-picker v-model="queryParams.settlementDate" type="year" placeholder="选择年份" value-format="YYYY"
          @change="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-card shadow="never" style="margin-bottom: 20px;">
      <template #header>
        油田内部---------{{ queryParams.settlementDate ? queryParams.settlementDate : year }}年月度产值报表
      </template>
      <el-table :data="tableData" border style="width: 100%" show-summary v-loading="loading">
        <el-table-column prop="month" width="88" align="center" label="月份" />
        <el-table-column v-for="item in columnList" :prop="item.deptId" :label="item.deptName" width="125" align="center">
        </el-table-column>
        <el-table-column label="合计" prop="sum" width="200" align="center" />
      </el-table>
    </el-card>
    <el-card shadow="never">
      <template #header>
        油田外部---------{{ queryParams.settlementDate ? queryParams.settlementDate : year }}年月度产值报表
      </template>
      <el-table :data="belowtableData" border style="width: 100%" show-summary v-loading="loading">
        <el-table-column prop="month" width="88" align="center" label="月份" />
        <el-table-column v-for="item in belowColumnList" :prop="item.deptId" :label="item.deptName" width="125"
          align="center">
        </el-table-column>
        <el-table-column label="合计" prop="sum" width="200" align="center" />
      </el-table>
    </el-card>


  </div>
</template>

<script lang="js" setup>
import { getCurrentInstance, ref } from 'vue';
import { getMonthlyOutputValue, getDeptList } from '@/api/statement';

const { proxy } = getCurrentInstance()
// 获取当年的一月
const now = new Date();
const year = ref(now.getFullYear())

const queryParams = ref({
  settlementDate: year.value,
  deptType: ''
})

const loading = ref(true)
const tableData = ref([])
const belowtableData = ref([])
// 内部
const columnList = ref([])
// 外部
const belowColumnList = ref([])

watch(() => queryParams.value.settlementDate,
  (newValue) => {
    if (!newValue) {
      queryParams.value.settlementDate = year.value
    }
  })
//获取部门列表
const getdeptList = () => {
  // 内部
  getDeptList({ orgType: '1' }).then(res => {
    columnList.value = res.data
  })
  // 外部
  getDeptList({ orgType: '2' }).then(res => {
    belowColumnList.value = res.data
  })
}
//获取列表数据
const getList = () => {
  loading.value = true;
  getMonthlyOutputValue({ settlementDate: queryParams.value.settlementDate, deptType: '1' }).then(res => {
    tableData.value = processData(res.data)
    loading.value = false;
  }).catch(error => {
    console.log(error);
  })
  getMonthlyOutputValue({ settlementDate: queryParams.value.settlementDate, deptType: '2' }).then(res => {
    belowtableData.value = processData(res.data)
    loading.value = false;
  }).catch(error => {
    console.log(error);
  })
}
const processData = (data) => {
  const conversionData = data.reduce((acc, item) => {
    if (!acc[item.workload_month]) {
      acc[item.workload_month] = {
        month: item.workload_month,
        data: [],
        sum: ''
      };
    }
    acc[item.workload_month][item.dept_id] = item.result;

    //转成数组
    acc[item.workload_month].data.push({
      result: item.result,
      label: item.dept_name,
      prop: item.dept_id
    });
    acc[item.workload_month].sum = formatterSum(acc[item.workload_month].data)
    return acc;
  }, {});
  return Object.values(conversionData);
}
//计算合计
const formatterSum = (item) => {
  const cellValue = item.reduce((sum, item) => {
    if (item.result) {
      sum += item.result
    } else {
      sum += 0
    }
    return sum
  }, 0)
  return cellValue
}
//查询列表
const handleQuery = () => {
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
getList();
getdeptList();
</script>